<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS 3D 画一个立方体</title>
    <style>
        .stage {
            perspective: 800px;
            position: relative;
            width: 120px;
            height: 120px;
            margin: 50px 120px;
            display: inline-block;
            vertical-align: middle;
        }

        .cube {
            transform-style: preserve-3d;
            position: absolute;
            width: 120px;
            height: 120px;
            transition: transform 1s;
        }

        .cube .surface {
            position: absolute;
            width: 120px;
            height: 120px;
            background-color: rgba(255, 255, 255, 0.8);
            border: 1px solid #ccc;
            box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
            text-align: center;
            line-height: 120px;
            font-size: 80px;
        }

        .surface-1 {
            transform: translateZ(60px);
        }

        .surface-2 {
            transform: rotateY(90deg) translateZ(60px);
        }

        .surface-3 {
            transform: rotateY(180deg) translateZ(60px);
        }

        .surface-4 {
            transform: rotateY(270deg) translateZ(60px);
        }

        .surface-5 {
            transform: rotateX(90deg) translateZ(60px);
        }

        .surface-6 {
            transform: rotateX(270deg) translateZ(60px);
        }

        .rotate-btn {
            display: inline-block;
            vertical-align: middle;
        }

        .up-triangle {
            border-width: 0 10px 25px 10px;
            border-color: transparent transparent #2196F3 transparent;
            border-style: solid;
            width: 0;
            height: 0;
            margin-left: 25px;
        }

        .left-triangle {
            border-width: 10px 25px 10px 0;
            border-color: transparent #2196F3 transparent transparent;
            border-style: solid;
            width: 0;
            height: 0;
        }

        .right-triangle {
            border-width: 10px 0 10px 25px;
            border-color: transparent transparent transparent #2196F3;
            border-style: solid;
            width: 0;
            height: 0;
            margin-left: 45px;
            margin-top: -20px;
        }

        .down-triangle {
            border-width: 25px 10px 0 10px;
            border-color: #2196F3 transparent transparent transparent;
            border-style: solid;
            width: 0;
            height: 0;
            margin-left: 25px;
        }

        .tips {
            margin-left: 100px;
            position: relative;
        }
    </style>
</head>

<body>
    <h3 class="tips">点击蓝色按钮可旋转立方体</h3>

    <div class="stage">
        <div class="cube" id="cube">
            <div class="surface surface-1">1</div>
            <div class="surface surface-2">2</div>
            <div class="surface surface-3">3</div>
            <div class="surface surface-4">4</div>
            <div class="surface surface-5">5</div>
            <div class="surface surface-6">6</div>
        </div>
    </div>

    <div class="rotate-btn">
        <div class="up-triangle" id="rotate-up"></div>
        <div class="left-triangle" id="rotate-left"></div>
        <div class="right-triangle" id="rotate-right"></div>
        <div class="down-triangle" id="rotate-down"></div>
    </div>
</body>

<script>
    var rotateX = 0;
    var rotateY = 0;

    var cube = document.getElementById('cube');

    document.getElementById('rotate-up').addEventListener('click', function () {
        rotateX += 90;
        rotateCube(rotateX, rotateY);
    }, false);

    document.getElementById('rotate-down').addEventListener('click', function () {
        rotateX -= 90;
        rotateCube(rotateX, rotateY);
    }, false);

    document.getElementById('rotate-left').addEventListener('click', function () {
        rotateY -= 90;
        rotateCube(rotateX, rotateY);
    }, false);

    document.getElementById('rotate-right').addEventListener('click', function () {
        rotateY += 90;
        rotateCube(rotateX, rotateY);
    }, false);

    function rotateCube(rotateX, rotateY) {
        cube.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
    }
</script>

</html>